<template>
  <div>
    <div class="" v-if="falg2">
      <div class="basic">
        <div style="display: flex; align-items: center">
          <div class="Useful">套餐优惠设置</div>
          <!-- <el-button
                              style="background-color:#fd804c;color: #fff;"
            style="margin-left: 10px; margin-bottom: 10px"
            @click="calculationTable"
            >点击计算各地域套餐总额</el-button
          > -->
        </div>
        <div class="talbe">
          <div
            class="table1"
            style="width: 30%; margin-right: 10px; font-size:14px;"
          >
            <div style="margin-bottom:10px;">依基础价格设置优惠金额：</div>
            <el-table :data="tableData1" border>
              <el-table-column prop="conturay" label=""> </el-table-column>
              <el-table-column
                prop="goodsPackageTotalPrice"
                label="套餐总额(元)"
              ></el-table-column>
              <el-table-column
                prop="goodsPackageDiscountPrice"
                label="优惠金额"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.goodsPackageDiscountPrice"
                    size="mini"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                    ref="input1"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div
            class="table2"
            style="width: 30%; margin-right: 10px;font-size:14px;"
          >
            <div style="margin-bottom:10px;">依城市价格设置优惠金额：</div>
            <div style="margin-bottom:10px;">
              <el-checkbox v-model="checked2">批量设置</el-checkbox>
            </div>
            <el-table :data="tableData2" border :height="500">
              <el-table-column prop="cityName" label="城市"> </el-table-column>
              <el-table-column
                prop="goodsPackageTotalPrice"
                label="套餐总额(元)"
              >
              </el-table-column>
              <el-table-column
                prop="goodsPackageDiscountPrice"
                label="优惠金额"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.goodsPackageDiscountPrice"
                    size="mini"
                    @input="changeTable2Value"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="table3" style="width:40%;">
            <div style="font-size:14px;margin-bottom:10px;">
              依商圈价格设置优惠金额：
            </div>
            <div style="margin-bottom:10px;">
              <el-checkbox v-model="checked3">批量设置</el-checkbox>
            </div>
            <el-table
              :data="tableData3"
              :span-method="objectSpanMethod"
              border
              :height="500"
            >
              <el-table-column prop="cityName" label="城市"> </el-table-column>
              <el-table-column prop="businessAreaName" label="商圈">
              </el-table-column>
              <el-table-column
                prop="goodsPackageTotalPrice"
                label="套餐总额(元)"
              ></el-table-column>
              <el-table-column
                prop="goodsPackageDiscountPrice"
                label="优惠价格"
              >
                <template slot-scope="scope">
                  <el-input
                    v-model="scope.row.goodsPackageDiscountPrice"
                    size="mini"
                    @input="changeTable3Value"
                    oninput="value=value.replace(/[^0-9.]/g,'')"
                  />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="buttons">
          <el-button
            style="background-color:#fd804c;color: #fff;margin-top: 10px"
            @click="Prew"
            >上一步</el-button
          >
          <el-button
            style="background-color:#fd804c;color: #fff;margin-top: 10px"
            @click="Next"
            >下一步</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "../../../api/bus";
export default {
  data() {
    return {
      falg2: false,
      skuIdsList: [], // 用户选择的商品规格
      requestUrl: "",
      tableData1: [],
      tableData2: [],
      checked2: false,
      tableData3: [],
      checked3: false
    };
  },
  activated() {
    Bus.$on("falg2", data => {
      //取  Bus.$on

      this.falg2 = data;
    });
    Bus.$on("goodsPackageDetails", data => {
      data.forEach(item => {
        this.skuIdsList.push(item.skuId);
      });
    });
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 第一列的合并方法
        const row1 = this.cityNameArr[rowIndex];
        const col1 = row1 > 0 ? 1 : 0;
        return {
          rowspan: row1,
          colspan: col1
        };
      }
    },
    //   下一步
    Next() {
      // 添加校验  优惠金额不能大于总额
      const validflag = this.validTable();
      if (!validflag) {
        return false;
      }
      this.falg2 = false;
      Bus.$emit("falg3", true, "子组件向兄弟组件传值");
      // 数据拼接
      const cityDiscountPrices = this.tableData2.map(item => {
        const newobj = {};
        newobj.cityCode = item.cityCode;
        newobj.cityName = item.cityName;
        newobj.goodsPackageTotalPrice = item.goodsPackageTotalPrice;
        newobj.goodsPackageDiscountPrice = item.goodsPackageDiscountPrice
          ? Number(item.goodsPackageDiscountPrice)
          : 0;
        return newobj;
      });
      const businessAreaDiscountPrices = this.tableData3.map(item => {
        const newobj = {};
        newobj.cityCode = item.cityCode;
        newobj.cityName = item.cityName;
        newobj.businessAreaCode = item.businessAreaCode;
        newobj.businessAreaName = item.businessAreaName;
        newobj.goodsPackageTotalPrice = item.goodsPackageTotalPrice;
        newobj.goodsPackageDiscountPrice = item.goodsPackageDiscountPrice
          ? Number(item.goodsPackageDiscountPrice)
          : 0;
        return newobj;
      });
      Bus.$emit("page2Msg", {
        goodsPkgDiscountPriceDTO: {
          baseDiscountPrice: {
            goodsPackageTotalPrice: this.tableData1[0].goodsPackageTotalPrice,
            goodsPackageDiscountPrice: this.tableData1[0]
              .goodsPackageDiscountPrice
              ? Number(this.tableData1[0].goodsPackageDiscountPrice)
              : 0
          },
          cityDiscountPrices,
          businessAreaDiscountPrices
        }
      });
    },
    Prew() {
      // 上一步
      this.falg2 = false;
      this.resetData();
      Bus.$emit("falg", true);
    },
    changeTable2Value(value) {
      // 批量修改
      if (this.checked2) {
        this.tableData2.forEach(item => {
          item.goodsPackageDiscountPrice = value;
        });
      }
    },
    changeTable3Value(value) {
      if (this.checked3) {
        this.tableData3.forEach(item => {
          item.goodsPackageDiscountPrice = value;
        });
      }
    },
    merageInit() {
      this.cityNameArr = [];
      this.cityNamePos = 0;
    },
    merage() {
      this.merageInit();
      for (let i = 0; i < this.tableData3.length; i += 1) {
        if (i === 0) {
          // 第一行必须存在
          this.cityNameArr.push(1);
          this.cityNamePos = 0;
        } else {
          if (this.tableData3[i].cityName === this.tableData3[i - 1].cityName) {
            this.cityNameArr[this.cityNamePos] += 1;
            this.cityNameArr.push(0);
          } else {
            this.cityNameArr.push(1);
            this.cityNamePos = i;
          }
        }
      }
    },
    resetData() {
      //重置当前页数据
      this.skuIdsList = []; // 用户选择的商品规格
      this.requestUrl = "";
      this.tableData1 = [];
      this.tableData2 = [];
      (this.checked2 = false), (this.tableData3 = []), (this.checked3 = false);
    },
    validTable() {
      // 表格数字大小的校验
      let flag = true;
      if (
        this.tableData1[0].goodsPackageDiscountPrice >
        this.tableData1[0].goodsPackageTotalPrice
      ) {
        flag = false;
        this.$message.error("基础价格配置的优惠价格大于套餐总额");
      }
      if (!flag) return;
      this.tableData2.forEach((item, index) => {
        if (item.goodsPackageDiscountPrice > item.goodsPackageTotalPrice) {
          flag = false;
          this.$message.error(`${item.cityName}配置的优惠价格大于套餐总额`);
          throw new Error();
        }
      });
      if (!flag) return;
      this.tableData3.forEach(item => {
        if (item.goodsPackageDiscountPrice > item.goodsPackageTotalPrice) {
          flag = false;
          this.$message.error(
            `${item.cityName}${item.businessAreaName}配置的优惠价格大于套餐总额`
          );
          throw new Error();
        }
      });
      return flag;
    }
  },
  watch: {
    skuIdsList: {
      handler(newvalue) {
        if (newvalue != "") {
          let url =
            "/hssgoodsadmin/serviceGoodsPkg/calculateGoodsPkgDiscountPrice?";
          this.skuIdsList.forEach((item, index) => {
            if (index == 0) {
              url += `skuIds=${item}`;
            } else {
              url += `&skuIds=${item}`;
            }
          });
          console.log(url);
          this.requestUrl = url;
        }
      },
      deep: true
    },
    requestUrl: {
      async handler(newvalue) {
        if (newvalue != "") {
          try {
            const { data } = await this.$http({
              url: newvalue,
              method: "get"
            });
            console.log(data);
            const {
              baseDiscountPrice,
              cityDiscountPrices,
              businessAreaDiscountPrices
            } = data;
            this.tableData1 = [
              {
                conturay: "全国统一",
                goodsPackageTotalPrice:
                  baseDiscountPrice.goodsPackageTotalPrice,
                goodsPackageDiscountPrice:
                  baseDiscountPrice.goodsPackageDiscountPrice
              }
            ];
            this.tableData2 = cityDiscountPrices;
            this.tableData3 = businessAreaDiscountPrices;
            this.merage();
          } catch (err) {
            this.tableData1 = [
              {
                conturay: "全国统一",
                goodsPackageTotalPrice: 998,
                goodsPackageDiscountPrice: null
              }
            ];
            this.tableData2 = [
              {
                cityCode: 1111,
                cityName: "上海",
                goodsPackageTotalPrice: 178,
                goodsPackageDiscountPrice: null
              },
              {
                cityCode: 1112,
                cityName: "武汉",
                goodsPackageTotalPrice: 178,
                goodsPackageDiscountPrice: null
              },
              {
                cityCode: 1113,
                cityName: "广州",
                goodsPackageTotalPrice: 178,
                goodsPackageDiscountPrice: null
              }
            ];
            this.tableData3 = [
              {
                businessAreaCode: "12",
                businessAreaName: "A商圈",
                cityCode: "123133123",
                cityName: "上海",
                goodsPackageDiscountPrice: null,
                goodsPackageTotalPrice: 765
              },
              {
                businessAreaCode: "21",
                businessAreaName: "B商圈",
                cityCode: "123133123",
                cityName: "上海",
                goodsPackageDiscountPrice: null,
                goodsPackageTotalPrice: 765
              },
              {
                businessAreaCode: "13",
                businessAreaName: "C商圈",
                cityCode: "123133123",
                cityName: "上海",
                goodsPackageDiscountPrice: null,
                goodsPackageTotalPrice: 765
              },
              {
                businessAreaCode: "1",
                businessAreaName: "Abc商圈",
                cityCode: "12313",
                cityName: "广州",
                goodsPackageDiscountPrice: null,
                goodsPackageTotalPrice: 765
              },
              {
                businessAreaCode: "12312",
                businessAreaName: "B商圈",
                cityCode: "12313313",
                cityName: "南通",
                goodsPackageDiscountPrice: null,
                goodsPackageTotalPrice: 765
              },
              {
                businessAreaCode: "2123123",
                businessAreaName: "B商圈",
                cityCode: "12313313",
                cityName: "南通",
                goodsPackageDiscountPrice: null,
                goodsPackageTotalPrice: 765
              }
            ];
            this.merage();
          }
        }
      },
      deep: true
    }
  }
};
</script>
<style scoped>
.basic {
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}
.Useful {
  font-size: 18px;
  margin-bottom: 15px;
}
.talbe {
  display: flex;
  justify-content: space-between;
}
.buttons {
  position: absolute;
  left: 50%;
  bottom: -70px;
  transform: translateX(-50%);
}
</style>
